<template>
	<div class="smart_directory_detail" :class="{ nodata: tableData.length === 0 }" v-loading="loading">
		<template v-if="tableData.length > 0">
			<el-row :gutter="6">
				<res-block v-for="(item, index) in tableData" :key="index" :data="item" :responsive="responsive"></res-block>
			</el-row>
			<sw-pagination :total="dataCount" :page-sizes="pageSizes" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryResourceData()"></sw-pagination>
		</template>
		<template v-else-if="!isFirst">
			<el-empty :image-size="200" description="暂无资源文件"></el-empty>
		</template>
	</div>
</template>

<script>
import resBlock from './block';
import { mapGetters } from 'vuex';
import { aiDirDetail } from '@/api/data/tbNetAiDir';
import { getResourceList } from '@/api/data/tbNetDisk';
export default {
	components: { resBlock },
	created() {
		this.dynamicUpdateColumn();
		window.addEventListener('resize', () => {
			this.dynamicUpdateColumn();
		});
	},
	beforeRouteEnter(to, from, next) {
		next((vm) => {
			vm.$store.dispatch('getCurLibFolder', to.params.id);
		});
	},
	data() {
		return {
			isFirst: true,
			loading: false,
			responsive: 200,
			dirDetail: {},
			pageSizes: [],
			queryData: { page: 1, limit: 120 },
			dataCount: 0,
			tableData: [],
			folderPathList: []
		};
	},
	computed: {
		...mapGetters(['curLibFolder']),
		dirId() {
			return this.$route.params.id;
		},
		folderId() {
			return this.$route.query.folder || '0';
		}
	},
	watch: {
		dirDetail(data) {
			this.queryResourceData();
			this.$watch('queryData.limit', () => {
				this.$set(this.queryData, 'page', 1);
				this.queryResourceData();
			});
			this.$watch(
				'folderId',
				(id) => {
					this.queryResourceData();
					this.getFolderPathData(id);
				},
				{ deep: true, immediate: true }
			);
		}
	},
	mounted() {
		this.getDirectoryDetail(this.dirId);
	},
	methods: {
		//获取目录详情
		async getDirectoryDetail(id) {
			let result = await aiDirDetail(id).then((res) => res.data);
			if (result.code === '0') {
				this.dirDetail = this.$detailData(result.data);
			}
		},

		//格式化请求参数
		formatRequestParams() {
			let data = this.dirDetail;
			let rules = JSON.parse(data.conditionJson);
			let params = { ...this.queryData, pId: this.folderId };
			if (!!data.dirIds) {
				params['dirId'] = data.dirIds;
			}
			rules.forEach((item) => {
				if (!item.value) return false;
				if (item.type === '1') {
					params['keyName'] = item.value;
				} else if (item.type === '2') {
					params['showType'] = item.value;
				}
			});
			return params;
		},

		//获取资源数据
		async getResourceData() {
			let params = this.formatRequestParams();
			let result = await getResourceList(params).then((res) => res.data);
			this.loading = false;
			this.isFirst = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = result.data || [];
			}
		},

		//查询资源数据
		queryResourceData() {
			this.loading = true;
			this.getResourceData();
		},

		//获取文件夹路径数据
		getFolderPathData(id) {
			console.log(this.curLibFolder);
			let folderData = this.curLibFolder.find((item) => item.id === id);
			console.log(folderData);
			if (!!folderData) {
				this.folderPathList.unshift(folderData);
				folderData.pid !== 0 && this.getFolderPathData(folderData.pid);
			}
		},

		//动态修改列
		dynamicUpdateColumn() {
			let width = document.body.clientWidth;
			if (width >= 1200) {
				this.responsive = 200;
				this.$set(this.queryData, 'limit', 60);
				this.pageSizes = [60, 120, 240];
			}
			if (width > 1290) {
				this.responsive = 210;
				this.$set(this.queryData, 'limit', 70);
				this.pageSizes = [70, 140, 280];
			}
			if (width > 1380) {
				this.responsive = 220;
				this.$set(this.queryData, 'limit', 80);
				this.pageSizes = [80, 160, 320];
			}
			if (width > 1470) {
				this.responsive = 230;
				this.$set(this.queryData, 'limit', 90);
				this.pageSizes = [90, 180, 360];
			}
			if (width > 1560) {
				this.responsive = 240;
				this.$set(this.queryData, 'limit', 100);
				this.pageSizes = [100, 200, 400];
			}
			if (width > 1650) {
				this.responsive = 250;
				this.$set(this.queryData, 'limit', 110);
				this.pageSizes = [110, 220, 440];
			}
			if (width > 1740) {
				this.responsive = 260;
				this.$set(this.queryData, 'limit', 120);
				this.pageSizes = [120, 240, 480];
			}
			if (width > 1830) {
				this.responsive = 270;
				this.$set(this.queryData, 'limit', 130);
				this.pageSizes = [130, 260, 520];
			}
			if (width > 1920) {
				this.responsive = 280;
				this.$set(this.queryData, 'limit', 140);
				this.pageSizes = [140, 280, 560];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.smart_directory_detail {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	&.nodata {
		align-items: center;
		justify-content: center;
	}
	.el-row {
		flex: 1;
		overflow: hidden;
		overflow-y: auto;
	}
	.el-empty {
		color: #606266;
	}
}
</style>
